<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
        .box{
            width: 1000px;
            height: 590px;
            background-color: rgb(188, 227, 236);
        }
    </style>
<script src="../js/jquery-1.10.2.min.js"></script>
</head>
<body>
	<!-- 2.准备具有大小的DOM容器 -->
    <div class="box"></div>

    <script src="../js/echarts.min.js"></script>
    <script>
        //3.初始化实例对象 echarts.init(dom容器)
        var myChart = echarts.init(document.querySelector(".box"));
        //4.指定配置项和数据
        myChart.setOption({

        	  title: {
        		    text: '门诊月度统计图'
        		  },
        		  tooltip: {
        		    trigger: 'axis',
        		    axisPointer: {
        		      type: 'cross',
        		      label: {
        		        backgroundColor: '#6a7985'
        		      }
        		    }
        		  },
        		  legend: {
        		    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        		  },
        		  toolbox: {
        		    feature: {
        		      saveAsImage: {}
        		    }
        		  },
        		  grid: {
        		    left: '3%',
        		    right: '4%',
        		    bottom: '3%',
        		    containLabel: true
        		  },
        		  xAxis: [
        		    {
        		      type: 'category',
        		      boundaryGap: false,
        		      data: []
        		    }
        		  ],
        		  yAxis: [
        		    {
        		      type: 'value'
        		    }
        		  ],
        		  series: [
        		    {
        		      name: 'Email',
        		      type: 'line',
        		      stack: 'Total',
        		      areaStyle: {},
        		      emphasis: {
        		        focus: 'series'
        		      },
        		      data: []
        		    },
        		    {
        		      name: 'Union Ads',
        		      type: 'line',
        		      stack: 'Total',
        		      areaStyle: {},
        		      emphasis: {
        		        focus: 'series'
        		      },
        		      data: []
        		    },
        		    {
        		      name: 'Video Ads',
        		      type: 'line',
        		      stack: 'Total',
        		      areaStyle: {},
        		      emphasis: {
        		        focus: 'series'
        		      },
        		      data: []
        		    },
        		    {
        		      name: 'Direct',
        		      type: 'line',
        		      stack: 'Total',
        		      areaStyle: {},
        		      emphasis: {
        		        focus: 'series'
        		      },
        		      data: []
        		    },
        		    {
        		      name: 'Search Engine',
        		      type: 'line',
        		      stack: 'Total',
        		      label: {
        		        show: true,
        		        position: 'top'
        		      },
        		      areaStyle: {},
        		      emphasis: {
        		        focus: 'series'
        		      },
        		      data: []
        		    }
        		  ]
		});

        
      //5.定义数据存放数组(动态变)
		var names = []; //建立一个类别数组（实际用来盛放X轴坐标值）
		var nums = []; //建立一个销量数组（实际用来盛放Y坐标值）

		//6.ajax发起数据请求
		$.ajax({
			type : "post",
			async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
			url : "/hospital_system/selemmController", //请求发送到TestServlet
			data : {},
			dataType : "json", //返回数据形式为json
			
			//7.请求成功后接收数据name+num两组数据
			success : function(result) {
				//result为服务器返回的json对象
				if (result) {
					//8.取出数据存入数组
					for (var i = 0; i < result.length; i++) {
						names.push(result[i].mm); //迭代取出类别数据并填入类别数组
					}
					for (var i = 0; i < result.length; i++) {
						nums.push(result[i].counts); //迭代取出销量并填入销量数组
					}

					myChart.hideLoading(); //隐藏加载动画

					//9.覆盖操作-根据数据加载数据图表
					myChart.setOption({
						xAxis : {
							data : names
						},
						series : [ {
							// 根据名字对应到相应的数据
							name : '业绩',
							data : nums
						} ]
					});

				}

			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				
				myChart.hideLoading();
			}
		})
	

    </script>
</body>

</html>